<script lang="ts" setup>
import {ref} from "vue"
import {useRouter} from 'vue-router'
import {FileToBase64} from "../utils"
import JsImages from "./js-images.vue"
import {upUser} from "../serve.ts";
import {ElMessage} from "element-plus";

const
    router = useRouter(),
    loading = ref(false),
    fromData:any = ref({}),
    inLoad = ref(true),
    userName = JSON.parse(sessionStorage.getItem('tokenInfo'))?JSON.parse(sessionStorage.getItem('tokenInfo'))['userName']:'',
    info = ref({})
;
function get() {
  fromData.value = JSON.parse(sessionStorage.getItem('userInfoSy')) || {}
  if (!JSON.parse(sessionStorage.getItem('userInfoSy'))){
    ElMessage.error('请先登录！')
    router.push('/login').catch(()=>true)
  }
}
get()
function loadFile(e: any) {
  loading.value = true
  FileToBase64(e).then((r: any) => {
    fromData.value.avatar = r
    loading.value = false
  })
}
function deleteChange() {
  fromData.value.avatar = ''
}
function change() {
  upUser({...fromData.value}).then(()=>{
    ElMessage({type:'success',message:'更新成功！',duration:1500})
    sessionStorage.setItem('userInfoSy',JSON.stringify({...fromData.value}))
  })
}
</script>

<template>
  <el-scrollbar>
    <el-card v-loading="loading" box element-loading-text="加载中...">
      <template #header>个人中心</template>
      <el-form ref="froms" el-From>
        <div uppw @click="router.push('/up-pw').catch(()=>true)">修改密码</div>
        <el-form-item label="ID：" prop="id">
            {{fromData['id']}}
        </el-form-item>
        <el-form-item label="账号：" prop="userName">
          {{userName}}
        </el-form-item>
        <el-form-item label="头像：" prop="avatar">
          <jsImages v-if="inLoad" :picUrl="fromData.avatar" @myPicFile="loadFile"
                    @delete-change="deleteChange"/>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickname">
          <el-input type="textarea" v-model="fromData['nickname']" style="width: 300px;" placeholder="请输入您的昵称"/>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-select placeholder="请选择您的性别" v-model="fromData['gender']" style="width: 160px;">
            <el-option v-for="i in [{label:'不详',value:3},{label:'男',value:1},{label:'女',value:2}]" :key="i.value" :label="i.label" :value="i.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名：" prop="nickname">
          <el-input v-model="fromData['nickname']" style="width: 200px;" placeholder="请输入您的姓名"/>
        </el-form-item>
        <el-form-item label="地址：" prop="address">
          <el-input type="textarea" v-model="fromData['address']" style="width: 350px;" placeholder="请输入您的地址"/>
        </el-form-item>
        <el-form-item label="手机：" prop="phone">
          <el-input v-model="fromData['phone']" style="width: 200px;" type="number" placeholder="请输入您的手机号"/>
        </el-form-item>
        <el-form-item label="邮箱：" prop="email">
          <el-input  v-model="fromData['email']" style="width: 200px;" placeholder="请输入您的邮箱号"/>
        </el-form-item>
        <el-form-item label="状态：" prop="status">{{ fromData['status'] == 1 ? '正常':  '禁用'}}</el-form-item>
        <el-form-item>
          <el-button round style="width: 70%;margin: auto" type="success" @click="change">修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="width: 100%;height: 100px"/>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[box] {
  width: 40%;
  margin: 30px auto auto;
  [el-From]{
    margin: auto;
    [uppw]{
      font-size: 12px;float: right;cursor: pointer;
      &:hover{
        color: #FA9BB6;
      }
    }
  }
}
</style>